<template>
  <div class="sizeDoc">
    <div class="mask" :style="{ display: showPopup }"></div>
    <div class="popup" :style="{ display: showPopup }">
      <div class="popup-top">
        <p>号型建档</p>
        <i
          class="el-icon-close"
          @click="
            () => {
              this.showPopup = 'none'
            }
          "
        ></i>
      </div>
      <el-table
        class="table_1"
        :data="showList"
        border
        highlight-current-row
        height="500px"
        :header-cell-style="{
          background: '#f4f4f4',
          padding: 0,
          height: '40px'
        }"
        :cell-style="{ padding: 0, height: '36px' }"
      >
        <el-table-column label="序号" type="index" width="50">
        </el-table-column>
        <el-table-column prop="id" label="编号"> </el-table-column>
        <!-- <el-table-column
          prop="size"
          label="尺码">
        </el-table-column> -->
        <el-table-column prop="relevanceSize" label="关联尺码">
        </el-table-column>
        <!-- <el-table-column
          prop="kind"
          label="尺码种类">
        </el-table-column> -->
        <el-table-column prop="manUpType" label="男上装号型" width="130px">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row['manUpType']">
              <!--scope.row:这一行数据   scope.$index:下标 -->
            </el-input>
          </template>
        </el-table-column>

        <el-table-column prop="manDownType" label="男下装号型" width="130px">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row['manDownType']">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="womanUpType" label="女上装号型" width="130px">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row['womanUpType']">
              <!--scope.row:这一行数据   scope.$index:下标 -->
            </el-input>
          </template>
        </el-table-column>

        <el-table-column prop="womanDownType" label="女下装号型" width="130px">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row['womanDownType']">
            </el-input>
          </template>
        </el-table-column>
      </el-table>

      <div style="text-align: end; margin: 10px 0 10px 0">
        <el-button
          @click="
            () => {
              this.showPopup = 'none'
            }
          "
          >取消</el-button
        >
        <el-button @click="saveHX" type="primary">保存</el-button>
      </div>
    </div>
    <div class="topbar">
      <p>编号</p>
      <el-input
        ref="sizeDocFirstInp"
        style="margin: 14px 16px 0 6px"
        v-model="no"
        :disabled="jx115"
      ></el-input>
      <p>尺码</p>
      <el-input v-model="size" @keyup.enter.native="sizeEnter"></el-input>
      <p>关联尺码</p>
      <!-- <el-input style="margin: 14px 16px 0 6px;" v-model="relevanceSize"></el-input> -->
      <el-select
        v-model="relevanceSize"
        style="margin: 14px 16px 0 6px"
        class="enterUp"
        :disabled="jx115"
      >
        <el-option
          v-for="item in relevanceSizeList"
          :key="item.value + Math.random()"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <p>尺码种类</p>

      <el-row class="sizeKindInput">
        <el-col @keyup.enter.native="preservation">
          <el-autocomplete
            clearable
            @select="chose"
            @change="leave"
            v-model="kind"
            :fetch-suggestions="querySize"
          >
          </el-autocomplete>
        </el-col>
      </el-row>

      <el-button
        style="margin-top: 14px"
        type="primary"
        :disabled="jx115"
        @click="showPop"
        >号型建档</el-button
      >
    </div>

    <div class="operation">
      <el-button
        @click="preservation"
        type="primary"
        icon="el-icon-folder-checked"
        :disabled="jx115"
        >保存</el-button
      >
      <el-button @click="dele" icon="el-icon-delete" :disabled="jx115"
        >删除</el-button
      >
      <i
        class="el-icon-question"
        @click="
          () => {
            this.instruction = true
          }
        "
        style="color: #017aff"
      ></i>
    </div>

    <div class="tables">
      <el-table
        class="table_1"
        :data="tableData"
        :fixed="false"
        border
        highlight-current-row
        height="74vh"
        :header-cell-style="{
          background: '#f4f4f4',
          padding: 0,
          height: '40px'
        }"
        :cell-style="{ padding: 0, height: '36px' }"
        @row-click="rowClick"
      >
        <el-table-column label="序号" type="index" width="50">
        </el-table-column>
        <el-table-column prop="no" label="编号"> </el-table-column>
        <el-table-column prop="size" label="尺码"> </el-table-column>
        <el-table-column prop="relevanceSize" label="关联尺码">
        </el-table-column>
        <el-table-column prop="kind" label="尺码种类"> </el-table-column>
      </el-table>

      <div class="table_bor"></div>

      <table border="1" class="table_2" cellspacing="0" cellpadding="0">
        <tr class="table_2_head">
          <th style="">
            <p>编号</p>
            <p>尺码</p>
            <p>种类</p>
          </th>
          <th v-for="item in rows" :key="item">{{ item }}</th>
        </tr>

        <template v-if="columns.length">
          <tr v-for="i in columns" :key="i.kind" class="columns_tr">
            <th class="columns_th">{{ i.kind }}</th>
            <td class="columns_td" v-for="j in i.list" :key="j + Math.random()">
              {{ j }}
            </td>
          </tr>
        </template>
        <template v-else>
          <div class="not_data">暂无数据</div>
        </template>
      </table>
    </div>
    <foot-view class="footView">
      <div slot="text">
        <span>数据库：{{ jxQuarter }}</span>
      </div>
    </foot-view>

    <div class="mask" v-if="instruction"></div>
    <div class="instructionBox" v-if="instruction">
      <i
        class="el-icon-close"
        @click="
          () => {
            this.instruction = false
          }
        "
      ></i>
      <img src="../../../assets/img/说明图.jpg" alt="" />
    </div>
  </div>
</template>

<script>
import footView from '../../../components/FootView'
import {
  getSize,
  postSize,
  putSize,
  deleteSize,
  getSizeInfo,
  getSizeType,
  putHX,
  getHX1
} from '../../../network/size'
import enterUp from '../../../components/mixins/enterUp'
import { get, save } from '../../../network/customerOrderTotal'
import { saveData } from '../../../network/shop'

export default {
  name: 'size_doc',
  mixins: [enterUp],
  data() {
    return {
      showPopup: 'none',
      inpList: [],
      id: '',
      no: '',
      size: '',
      relevanceSize: '',
      relevanceSizeList: [
        { value: 'c05', label: 'c05' },
        { value: 'c07', label: 'c07' },
        { value: 'c09', label: 'c09' },
        { value: 'c11', label: 'c11' },
        { value: 'c13', label: 'c13' },
        { value: 'c15', label: 'c15' },
        { value: 'c17', label: 'c17' },
        { value: 'c19', label: 'c19' },
        { value: 'c21', label: 'c21' },
        { value: 'c23', label: 'c23' },
        { value: 'f', label: 'f' }
      ],
      kind: '',
      sizeList: [],
      allAlign: 'center',
      tableData: [],
      tableData1: [],
      rows: [],
      columns: [],
      showList: [],

      // jxQuarter: document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))[1],
      jxQuarter: null,

      instruction: false,
      firstList: ['05', '07', '09', '11', '13', '15', '17', '19', '21', '23'],
      lastList: ['XS', 'S', 'M', 'L', 'XL', '2L', '3L', '4L', '5L', '6L'],

      jx115: true
    }
  },
  watch: {
    kind(a, b) {
      this.kind = a.toUpperCase().trim()
    },
    no(a, b) {
      if (a) {
        this.no = a.toUpperCase().trim()
      }
    },
    // relevanceSize(a,b){
    //   this.relevanceSize = a.toUpperCase()
    // },
    size(a, b) {
      this.size = a.toUpperCase().trim()
    }
  },
  components: {
    footView
  },
  methods: {
    leave() {
      if (this.kind == '') {
        this.tableData = this.tableData1
      }
    },
    chose(e) {
      console.log(e.value)
      let saveList = []
      this.tableData1.forEach((el) => {
        if (e.value == el.kind) {
          saveList.push(el)
        }
      })
      this.tableData = saveList
    },
    sizeEnter() {
      // console.log(this.size)
      if (this.size == 'JX115') {
        this.jx115 = false
      }
    },
    //保存号型
    saveHX() {
      putHX(this.showList).then((res) => {
        if (res.data.code == 200) {
          this.$message.success({
            message: '保存成功'
          })
        } else {
          this.$message.error({
            message: '保存失败'
          })
        }
      })
    },
    showPop() {
      this.showPopup = 'block'
      // getSize({kind:this.kind,limit: 99999}).then(res=>{
      //   this.showList = res.data.data
      // })
      getHX1().then((res) => {
        this.showList = res.data.data
      })
    },
    // 尺码种类输入选择
    querySize(queryString, cb) {
      cb(this.sizeList)
    },

    rowClick(e) {
      this.no = e.no
      this.size = e.size
      this.relevanceSize = e.relevanceSize
      this.kind = e.kind + ''
      this.id = e.id
      // console.log(e)
    },
    _getSize(params = { limit: 99999 }) {
      getSize(params).then((res) => {
        this.tableData = res.data.data || []
        this.tableData1 = res.data.data || []
        this.tableData.sort((a, b) => {
          if (a.kind == b.kind) {
            return a.relevanceSize.localeCompare(b.relevanceSize)
          } else {
            return a.kind - b.kind
          }
        })
      })
    },
    clearData() {
      // console.log('this.clearData()')
      this.no = ''
      this.size = ''
      this.relevanceSize = ''
      this.id = ''
    },
    preservation() {
      if (
        this.no == '' ||
        this.size == '' ||
        this.relevanceSize == '' ||
        this.kind == ''
      ) {
        this.$message.error('编号，尺码，关联尺码或尺码种类不能为空')
        this.$refs.sizeDocFirstInp.focus()
        return
      }

      if (this.no.indexOf('-') == -1) {
        if (this.no != '0' && this.no != '00' && this.no != 'F') {
          this.$message.error('编号不合规')
          return
        }
      } else {
        let tmp = this.no.split('-')
        if (
          (this.firstList.indexOf(tmp[0]) == -1 ||
            this.lastList.indexOf(tmp[1]) == -1) &&
          this.no != '00-F'
        ) {
          this.$message.error('编号不合规')
          return
        }
      }

      let obj = {
        id: this.id,
        no: this.no,
        size: this.size,
        relevanceSize: this.relevanceSize,
        kind: this.kind
      }
      for (const i of this.tableData) {
        if (i.id == this.id) {
          this.$confirm('此操作将修改此编号的数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              putSize(obj).then((res) => {
                if (res.data.code == 200) {
                  this._getSize({ kind: this.kind, limit: 999999 })
                  this.clearData()
                  this.refreshRight()
                  this.$message({
                    type: 'success',
                    message: '修改成功!'
                  })
                }
              })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消修改'
              })
            })
          return
        }
      }

      postSize(obj).then((res) => {
        if (res.data.code == 200) {
          this.refreshRight()
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this._getSize({ kind: this.kind, limit: 999999 })
          this.clearData()
          this.$refs.sizeDocFirstInp.focus()
        } else {
          this.$alert('编号、尺码、尺码种类组合不可重复', '添加失败', {
            confirmButtonText: '确定'
          })
        }
      })
    },
    dele() {
      if (this.id == '') {
        this.$alert('请选择要删除的数据', '', {
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('是否删除此编号的数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteSize({ id: this.id }).then((res) => {
            if (res.data.code == 200) {
              this._getSize({ kind: this.kind, limit: 999999 })
              this.clearData()
              this.refreshRight()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // 刷新右表数据
    refreshRight() {
      this.rows = []
      this.columns = []
      this.sizeList = []
      getSizeType().then((res) => {
        let tmpTypeList = res.data.data

        getSize({ limit: 9999999 }).then((s) => {
          // 所有尺码表
          let tmp1 = s.data.data
          tmp1.sort((a, b) => {
            return a.relevanceSize.localeCompare(b.relevanceSize)
          })
          // 检查是否添加
          let c = 1
          // 临时表
          let tmpRows = [tmp1[0].no]

          for (const a of tmp1) {
            for (const i of tmpRows) {
              // 编号相等
              if (a.no == i) {
                c = 0
                break
              } else {
                c = 1
              }
            }
            if (c) {
              tmpRows.push(a.no)
            }
          }
          // console.log(tmpRows) // 尺码表已经遍历出来
          this.rows = tmpRows.sort()

          tmpTypeList.forEach((e) => {
            // 尺码种类赋值
            this.sizeList.push({
              value: String(e)
            })

            // 右表尺码赋值
            let tmpRsize = []
            let tmpSizeItem = ''

            getSize({ kind: e, limit: 99999 }).then((r) => {
              r.data.data.sort((a, b) => {
                return a.relevanceSize.localeCompare(b.relevanceSize)
              })
              for (const v of tmpRows) {
                for (const b of r.data.data) {
                  if (b.no == v) {
                    tmpSizeItem = b.size
                    break
                  } else {
                    tmpSizeItem = ''
                  }
                }
                tmpRsize.push(tmpSizeItem)
              }
              // console.log(tmpRsize)
            })
            // let obj = {
            //   0: 2,
            //   1: 'e',
            //   3: 'y',
            //   4: 8,
            //   5: 3,
            //   6: 'w',
            //   7: 'p',
            //   8: 1,
            //   9: 'a'
            // }
            // let obj2 = {
            //   0: 2,
            //   1: 'e',
            //   3: 'y',
            //   4: 8,
            //   5: 3,
            //   6: 'w',
            //   7: 'p',
            //   8: 1,
            //   9: 'a'
            // }
            this.columns.push({ kind: e, list: tmpRsize })
            // this.columns.push({ kind: 2, list: obj })
            // this.columns.push({ kind: 3, list: obj2 })
            console.log(this.columns)
          })
        })
        // let tmp = r.data.data
        let list = []
      })
    }
  },
  created() {
    let jxQuarterVal = document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))
    this.jxQuarter = jxQuarterVal ? jxQuarterVal[1] : null

    this.inpList = this.getInput()
    this._getSize({ limit: 999999 })
    this.refreshRight()
  }
}
</script>

<style scoped lang="less">
.sizeDoc {
  margin-right: 0.5vw;
  padding: 0 15px;
  background-color: white;
  height: 95vh;
  position: relative;
}
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 9;
}
.popup {
  background: white;
  width: 750px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}
.popup-top {
  padding: 10px 15px;
  background: #f4f4f4;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.popup-top p {
  font-weight: 700;
}
/* 头部 */
.topbar {
  height: 60px;
  display: flex;
  white-space: nowrap;
  border-bottom: 2px solid #f4f4f4;
}
.topbar p {
  width: auto;
  line-height: 60px;
}
.sizeKindInput {
  display: inline-block;
  position: relative;
  top: 14px;
}

/* 按钮 */
.operation {
  padding: 15px 0;
  white-space: nowrap;
}

/* 表格 */
.tables {
  display: flex;
}
.tables div {
  display: inline-block;
}
.table_bor {
  height: 74vh;
  border-right: solid #dfdfdf 2px;
}
.table_2 {
  border: solid #dfdfdf 1px;
  border-collapse: collapse;
  border-spacing: 0;
  width: 1000px;
  color: #606266;
  margin-left: 30px;
}
.table_2 th,
.table_2 td {
  border: solid #ebeef5 1px;
  padding: 0;
  margin: 0;
}
.table_2 td {
  padding-left: 10px;
  text-align: center;
}

.table_2 .not_data {
  position: absolute;
  left: 70%;
  top: 50%;
  color: #c0c4cc;
}

.table_2 {
  height: 100%;
  .table_2_head {
    color: black;
    height: 48px;
    max-height: 48px;
  }
  .columns_tr {
    height: 36px;
    max-height: 36px;
  }
  .columns_th {
    height: 36px;
    max-height: 36px;
    font-weight: normal;
  }
  .columns_td {
    height: 36px;
    max-height: 36px;
  }
}

.table_2 tr {
  /* height: 36px; */
}
.table_2 tr:first-child th {
  font-size: 14px;
}
// .table_2 tr th:first-child {
//   width: 115px;
//   font-weight: normal;
// }
.table_2 p {
  display: inline;
}
.table_2 p:first-child {
  position: relative;
  top: -10px;
  left: 70px;
}
.table_2 p:first-child::before {
  content: '';
  position: absolute;
  left: -38px;
  top: 19px;
  width: 74px;
  height: 1px;
  transform: rotate(33deg);
  background-color: #e1e1e1;
}
.table_2 p:nth-child(2) {
  position: relative;
  top: -11px;
  left: -10px;
}
.table_2 p:nth-child(2)::before {
  content: '';
  position: absolute;
  left: -36px;
  top: 27px;
  width: 119px;
  height: 1px;
  transform: rotate(13deg);
  background-color: #e1e1e1;
}
.table_2 p:nth-child(3) {
  position: relative;
  top: 10px;
  left: -70px;
}
.sizeDoc .table_1 {
  margin-right: 30px;
  width: '570px';
}

.footView span {
  float: left;
  margin-right: 48px;
  line-height: 6vh;
  font-size: 14px;
}

.instructionBox {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
}
.instructionBox i {
  float: right;
  text-align: end;
  color: rgb(70, 70, 70);
  font-size: 40px;
  background-color: whitesmoke;
  width: 100%;
}
</style>

<style>
.sizeDoc .el-input__inner {
  height: 32px;
}
.sizeDoc .el-input__icon {
  line-height: 30px;
}
.sizeDoc .el-input {
  width: 160px;
  margin: 14px 25px 0 6px;
}
.sizeDoc .el-input--suffix {
  margin: 0 25px 0 6px;
}
.sizeDoc .el-button {
  padding: 8px 15px;
  margin-right: 12px;
  height: 30px;
}
.sizeDoc .popup .el-input {
  margin: 3px 6px 3px 6px;
}
.sizeDoc .popup .el-input__inner {
  width: 110px;
}
</style>
